<!DOCTYPE html>
<html data-use-rem="750" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">

<title>C7扫码上传</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">

<link href="./bootstrap/css/magicalcoder.css" rel="stylesheet" />
<script src="./bootstrap/js/jquery.min.js"></script>
<script src="./bootstrap/js/json3.min.js"></script>
<script src="./bootstrap/js/echarts.min.js"></script>
<script src="./bootstrap/js/dataTool.min.js"></script>
<script src="./bootstrap/js/popper.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="./bootstrap/js/common.js"></script>
<script src="./bootstrap/js/magicalcoder.js"></script>


<script type="text/javascript">
	function upMCU(event) {
		var e = event || window.event || arguments.callee.caller.arguments[0];
		if (e && e.keyCode == 13) {
			//$("#result").empty();
			sn = $("#sn").val();
			mcu = $("#mcu").val();
			if (mcu.length == 16) {
				$.ajax({
					type : 'POST',
					url : "binding",
					cache : false, //禁用缓存
					data : JSON.stringify({
						"sn" : sn,
						"mcu" : mcu
					}),
					contentType : "application/json",
					dataType : "json",
					success : function(data) {
						uploadRes(data)
					}
				})
			} else {
				alert("MCU错误");
				$("#mcu").val("");
			}
		}
	}

	function upSN(event) {
		var e = event || window.event || arguments.callee.caller.arguments[0];
		if (e && e.keyCode == 13) {
			//$("#result").empty();
			sn = $("#sn").val();
			if (sn.length == 11) {
				$("#mcu").attr("readOnly", false);
				$("#sn").attr("readOnly", true);
				$("#mcu").focus();
			} else {
				alert("sn错误");
				$("#sn").val("");
			}
		}
	}

	function uploadRes(data) {
		var sn = document.getElementById('sn');
		var mcu = document.getElementById('mcu');
		
		var p1 = '<p class="text-danger" >';
		var p2 = '<p class="text-primary" >';
		//var p4 = $('#result').children().length;
		var p3 = data.result + '</p>';
		var success = p2 +  p3;
		var fail = p1 +  p3;
		
		if (data.binded == 1) {
			//$("#result").append("<br>"+data.result);
			//$("#result").removeClass("text-danger");
			//$("#result").addClass("alert alert-success");
			$("#result").prepend(success);
		} else {
			alert(data.result);
			//$("#result").append(data.result);
			$("#result").prepend(fail);
			//$("#result").removeClass("alert alert-success");
			//$("#result").addClass("text-danger");
		}
		$("#sn").val("");
		$("#mcu").val("");
		$("#sn").attr("readOnly", false);
		$("#mcu").attr("readOnly", true);
		$("#sn").focus();
	}

	function boxres(data) {
		var boxinput = document.getElementById('boxcodeurl');
		var barinput = document.getElementById('barcode');

		if (data.binded == 1) {
			$("#boxcodeurl").attr("readOnly", true);
			$("#barcode").attr("readOnly", false);
			$("#result").append(data.result);
			$("#num").val(data.boxnum);
			$("#result").removeClass("text-danger");
			$("#result").addClass("alert alert-success");
			setCaretPosition(barinput, barinput.value.length);
		} else {
			//$("#list").prepend('<li>' + data.result +  '</li>');
			//$(data.id).addClass("text-danger");
			$("#result").append(data.result);
			$("#result").removeClass("alert alert-success");
			$("#result").addClass("text-danger");
			setCaretPosition(boxinput, boxinput.value.length);
		}
	}

	function setCaretPosition(ctrl, pos) {
		// Modern browsers
		if (ctrl.setSelectionRange) {
			ctrl.focus();
			ctrl.setSelectionRange(pos, pos);

			// IE8 and below
		} else if (ctrl.createTextRange) {
			var range = ctrl.createTextRange();
			range.collapse(true);
			range.moveEnd('character', pos);
			range.moveStart('character', pos);
			range.select();
		}
	}
</script>
</head>
<body>
	<div class="container" style="height: 332px;">

		<h2 class="mc-ui-flex-center">C7扫码上传</h2>
		<table class="table">
			<!--  <thead>
				<tr>
					<td class="border-info" style="width: 9.37835%;">上传数</td>
					<td class="border-info text-danger"><input
						class="form-control border-0 bg-light" type="text" id="num"
						readonly value="0"
						style="width: 135px; font-size: 20px; font-weight: bold; color: rgb(204, 0, 0);" /></td>
				</tr>
			</thead>-->
			<tbody>
				<tr>
					<td class="border-info">扫描SN</td>
					<td class="border-info" colspan="3"><input
						class="form-control" type="text" id="sn"
						aria-describedby="emailHelp" onkeydown="upSN(event)" /></td>
				</tr>
				<tr>
					<td class="border-info">扫描MCU</td>
					<td class="border-info" colspan="3"><input
						class="form-control" type="text" id="mcu"
						aria-describedby="emailHelp" onkeydown="upMCU(event)" readonly /></td>
				</tr>
				<tr>
					<td class="border-info">结果</td>
					<td class="border-info" colspan="3">
						<div id="result" class="bg-light" style=" overflow:auto; height: 400px;"
							role="alert">
						<!-- 	<ul id="list">
								<li>List item 1</li>
							</ul>  -->
					    </div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

</body>
</html>